<template>
  <div>
    <div class="head">
      <Navbar />
    </div>
    <div class="aaaa">
      <div
        class="singer"
        :style="{'background-image' : 'url(' + aaa.picUrl + ')'}"
      >
        <p>{{aaa.name}}</p>
        <p>歌手榜华语地区 No.1</p>
        <p>昵称 :{{singlist.nickname}}</p>
        <p>粉丝 652565</p>
        <p>{{aaa.identifyTag}} {{aaa.identities}}</p>
      </div>
      <div class="introduction">
        <h4>歌手简介</h4>
        <div class="p">
          <div
            class="jd"
            v-show="!flag"
          >{{aaa.briefDesc}}</div>
          <div
            class="all"
            v-show="flag"
          >{{aaa.briefDesc}}</div>
          <button @click="opl">{{flag?"收起":"查看完整歌手信息"}}</button>
        </div>
      </div>

      <div class="hotmusic">
        <h4>热门单曲</h4>
        <ul>
          <li
            v-for="(item,index) in  musiclist"
            :key="item.id"
            @click="play(index)"
          >
            <p>{{item.name}} <span v-if="item.alia[0]">({{item.alia[0]}})</span></p>
            <p> <img
                src="../../../public/img/2.png"
                alt=""
              > {{item.ar[0].name}} - {{item.al.name}} </p>
            <van-icon
              name="play-circle-o"
              size="35"
            />
          </li>
        </ul>
      </div>

      <div class="newmusic">
        <h4>最新音乐</h4>
        <div>
          <van-card
            :desc="bbb.name"
            :title="aaa.name"
            :thumb="bbb.picUrl"
          >
            <template #price>
              {{$moment(list.publishTime).format('YYYY-MM-DD HH:mm:ss')}}
            </template>
          </van-card>

        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Navbar from "../../components/Navbar.vue";
import { getSingerInfo, getSingerhot } from '../../api/search'
export default {
  data: () => ({
    singlist: {},
    aaa: {},
    musiclist: [],
    list: [],
    bbb: [],
    flag: false,
    singId: ''

  }),
  created() {
    this.getSingerInfo()
    this.getSingerhot()
  },
  methods: {
    play(index) {
      console.log(index);
      this.singId = this.musiclist[index].id
      console.log(this.singId);
      this.$store.state.musicId = this.singId
      this.$router.push('/playmusic')
    },
    opl() {
      this.flag = !this.flag
    },
    async getSingerInfo() {
      const res = await getSingerInfo(this.$store.state.singId)
      console.log(res);
      this.singlist = res.data
      this.aaa = res.data.artist
    },
    async getSingerhot() {
      const res = await getSingerhot(this.$store.state.singId)
      this.musiclist = res.data.songs.slice(0, 5)
      this.list = this.musiclist[1]
      this.bbb = this.musiclist[1].al
    }
  },
  components: {
    Navbar
  }
}
</script>
<style lang="less" scoped>
.aaaa {
  .singer {
    width: 100%;
    height: 340px;
    padding-top: 10px;
    background-size: 100%;
    p {
      margin-left: 20px;
      color: white;
    }
    p:nth-of-type(1) {
      margin-top: 140px;
      font-size: 22px;
    }
    p:nth-of-type(2) {
      font-size: 16px;
    }
    p:nth-of-type(3) {
      font-size: 15px;
    }
    p:nth-of-type(4) {
      font-size: 16px;
    }
    p:nth-of-type(5) {
      font-size: 14px;
    }
  }
}
.introduction {
  .p {
    width: 90%;
    margin: 0 auto;
    text-indent: 20px;
  }
}
.hotmusic {
  ul {
    width: 100%;
    li {
      width: 100%;
      height: 70px;
      position: relative;
      border-top: 1px dashed #e5e5e5;
      margin-top: 5px;
      p:nth-of-type(1) {
        margin-top: 1px;
        height: 38px;
        line-height: 38px;
        font-size: 18px;
        padding-left: 12px;
        width: 80%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        span {
          font-size: 16px;
          color: gray;
        }
      }
      p:nth-of-type(2) {
        width: 80%;
        margin-top: -20px;
        height: 26px;
        line-height: 26px;
        font-size: 12px;
        padding-left: 12px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: gray;
        img {
          vertical-align: middle;
          padding-right: 5px;
        }
      }
      .van-icon {
        position: absolute;
        top: 19%;
        right: 4%;
        opacity: 0.5;
      }
    }
  }
}
.jd {
  height: 100px;
  white-space: wrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 34px;
}
.all {
  line-height: 34px;
}
button {
  margin-left: 160px;
  margin-top: 10px;
}
.van-card__title {
  line-height: 36px;
  font-size: 18px;
}
.van-card__desc {
  line-height: 28px;
  font-size: 16px;
  margin-left: 10px;
}
.van-card__price {
  margin-left: 10px;
  font-size: 18px;
  color: black;
}
h4 {
  padding-left: 10px;
  font-size: 20px;
}
</style>  